<template>
  <div class="ord_detail">
    <nav-top @callback="callback"></nav-top>
    <div class="ord_box">
      <div class="tit_block">
        <div class="tit">
          <span>{{info.pname}}</span>
          <span>￥{{info.real_pay}}</span>
          <span
            class="status"
          >{{info.status=='1'?'未结算':info.status=='2'?"已支付":info.status=='3'?'已退款':''}}</span>
        </div>
        <div class="block">
          <div class="top">
            <span>{{info.username}}</span>
            <span>{{info.phone}}</span>
            <span>{{info.realname}}</span>
          </div>
          <div class="bottom">
            <span>{{info.sname}}{{info.njname}}{{info.cname}}</span>
            <span @click="copy({sch:info.phone})" class="copy">复制</span>
          </div>
        </div>
      </div>
      <div class="main_block">
        <div class="line">
          <span class="tt">订单号：</span>
          <span ref="num">{{info.out_trade_no}}</span>
          <span @click="copy({num:info.out_trade_no})" class="copy">复制</span>
        </div>
        <div class="line">
          <span class="tt">支付方式：</span>
          <span>{{info.pcname}}</span>
        </div>
        <div class="line">
          <span class="tt">下单时间：</span>
          <span>{{info.create_time}}</span>
        </div>
        <div class="line">
          <span class="tt">支付时间：</span>
          <span>{{info.update_time}}</span>
        </div>
        <div class="line">
          <span class="tt">负责人：</span>
          <span>{{info.xname}}</span>
        </div>
        <div class="line">
          <span class="tt">订单类型：</span>
          <span>{{info.oname}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "detail",
    data() {
      return {
        id: "",
        info: {
          pname: "",
          real_pay: 0,
          status: "",
          username: "",
          phone: "",
          realname: "",
          sname: "",
          njname: "",
          cname: "",
          out_trade_no: "",
          pcname: "",
          create_time: "",
          update_time: "",
          xname: "",
          oname: ""
        }
      };
    },
    created() {
      this.id = this.$route.query.id;
      this.getOrderDetail(this.id);
    },
    methods: {
      copy(item) {
        // console.log(item);
        let copyText = "";
        Object.keys(item).map(i => {
          if (item[i]) {
            copyText += item[i];
          }
        });
        // console.log(copyText);
        var input = document.createElement("input"); // 直接构建input
        input.value = copyText; // 设置内容
        document.body.appendChild(input); // 添加临时实例
        input.select(); // 选择实例内容
        document.execCommand("Copy"); // 执行复制
        document.body.removeChild(input); // 删除临时实例
      },
      callback(icon) {
        if (icon == "back") this.$router.go(-1);
      },
      getOrderDetail(id) {
        this.Http.getOrderDetail({ id })
          .then(r => {
            // console.log(r);
            this.info = r.info;
            // console.log(this.info);
          })
          .catch(e => console.log(e));
      }
    }
  };
</script>
<style lang="less" scoped>
  .ord_detail {
    background: rgba(247, 248, 250, 1);
    height: 100vh;
    .copy {
      color: rgba(20, 200, 255, 1);
    }
    .ord_box {
      padding: 0 36px;
      .tit_block {
        // width:679px;
        // height:252px;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 255, 255, 1) 100%
        );
        box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        .tit {
          padding: 39px 36px 33px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid rgba(232, 232, 232, 1);
          font-size: 30px;
          font-weight: bold;
          color: rgba(34, 34, 34, 1);
          line-height: 48px;
          .status {
            font-size: 24px;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            line-height: 48px;
          }
        }
        .block {
          padding: 0 36px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .top {
            font-size: 30px;
            font-family: Helvetica;
            font-weight: bold;
            color: rgba(34, 34, 34, 1);
            line-height: 36px;
            padding: 32px 0;
            display: flex;
            justify-content: space-between;
          }
          .bottom {
            display: flex;
            justify-content: space-between;
            font-size: 26px;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            line-height: 36px;
            padding-bottom: 32px;
          }
        }
      }
      .main_block {
        margin-top: 40px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        .line {
          padding: 0 36px;
          position: relative;
          border-bottom: 1px solid rgba(232, 232, 232, 1);
          &:last-child {
            border: none;
          }
          .tt {
            width: 168px;
            display: inline-block;
            // height: 25px;
            font-size: 26px;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            line-height: 36px;
            padding: 30px 0;
          }
          .copy {
            font-size: 26px;
            line-height: 56px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 36px;
          }
        }
      }
    }
  }
</style>